import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import {Table, Button,Row,Col,Layout, Breadcrumb,DatePicker,Popconfirm,Icon,Input,Card,Modal,message} from 'antd';
import TableStyle from '../../styles/TableCss.less';
import style from '../../styles/ResetInput.less';
import PayStyle from '../../styles/Pay.less';
import {Link} from 'dva/router'
import reqwest from 'reqwest';
import {datevali} from '../../utils/Validator.js';
import {range,disabledDate,disabledDateTime } from '../../utils/Date.js'
import moment from 'moment';
import pingpp from 'pingpp-js'
import {reqwest_get,reqwest_post} from '../../utils/Reqwest.js'
const {  Content, Footer } = Layout;
let start_at=null;
let end_at=null;
class Wallet extends React.Component{
  constructor(props){
    super(props);
    let _this=this;
    this.state={
      data:[],
      visible:false,
      visible1:false,
      wallte:undefined,
      recharge:null,
      withdraw:null,
    }
  }
  getWallet(){
    reqwest_get('/api/wallets/me',{
        access_token:localStorage['token'],
      },(data) => {
        console.log(data);
        this.setState({wallte:data.wallet});
     })
  }
  loadServer() {
    // console.log('params:', params);
    let _data=[];
    let _this = this;
    reqwest({
      url: window.host+'/api/wallets/recharge',
      method: 'post',
      crossOrigin: true,
      // headers:AUTH_KEY,
      // contentType: 'application/json',
      data:{
        access_token:window.localStorage['token'],
        amount:_this.state.recharge,
        trade_type:'alipay_pc_direct'
      },
      type: 'json',
    }).then((data)=>{
         if(data.status=='success'){
       pingpp.createPayment(data.data.charge, function(result, err){
         // alert(result);
         if (result == "success") {
           // 只有微信公众账号 wx_pub 支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL。

           console.log(1)
         } else if (result == "failed") {
            message.error(data.msg,0.6)
           // charge 不正确或者微信公众账号支付失败时会在此处返回
         } else if (result == "cancel") {
           // 微信公众账号支付取消支付
           message.error('取消支付',0.6)
         }
       });
      }
    }).fail((data)=>{

    })
  }
  componentWillMount(){
    // this.fetch({page:1});
    console.log(this.props.location.current)
    this.getWallet()
  }
  menuClick(e){
    console.log(e.item.props.value)
    this.setState({dropDown:e.item.props.value});
  }
  handleOk = () => {
    this.loadServer(); 
  }
  onWithdrawOk(){
    let _this = this;
    reqwest_post('/api/wallets/withdraw',{
      access_token:window.localStorage['token'],
      amount:_this.state.withdraw,
      trade_type:'alipay_pc_direct'
    },(data)=>{
      if(data.status=='success'){
       pingpp.createPayment(data.data.charge, function(result, err){
         // alert(result);
         if (result == "success") {
           // 只有微信公众账号 wx_pub 支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL。
           console.log(1)
         } else if (result == "fail") {
           // charge 不正确或者微信公众账号支付失败时会在此处返回
         } else if (result == "cancel") {
           // 微信公众账号支付取消支付
         }
       });
      }
    })
  }
  render(){
    const { selectedRowKeys,data,pagination,loading,dropDown,columns } = this.state;

    return(
      <Layout style={{background:'#fff',height:'100%' }}>
        <Content>
          <Row type='flex'>
            <Col span={7} xl={{span:7}} xs={7} style={{padding:'24px 25px 24px'}}>
              <Breadcrumb style={{fontSize:14}}>
                <Breadcrumb.Item>我的钱包</Breadcrumb.Item>
              </Breadcrumb>
            </Col>
            <Col xl={{span :3,offset:13}} lg={{span:3,offset:13}} md={{span:3,offset:13}} sm={{span:3,offset:13}} style={{lineHeight:'60px',textAlign:'right'}}>

            </Col>
          </Row>
          <Layout className={`${TableStyle.tb_serbor}`}>
            <Row type='flex' className={`${TableStyle.tb_ser}`}>
              <Col span={6}>
                账户余额:{this.state.wallte.amount}
              </Col>
              <Col span={7} offset={11} style={{textAlign:'right'}}>
                <span>
                  <Link onClick={()=>{this.setState({visible:true})}}>充值</Link>
                  <a><span className="ant-divider" /></a>
                  <Link onClick={()=>{this.setState({visible1:true})}}>提现</Link>
                </span>
              </Col>
            </Row>
            <Card className={`${PayStyle.card}`}>
              <span>
                <p>总收入</p><p>{this.state.wallte.amount}</p>
              </span>
              <span>
                <p>总提成</p><p>{this.state.wallte.income}</p>
              </span>
            </Card>
          
          </Layout>
        </Content>
        <Modal 
          onOk={this.loadServer.bind(this)} title='充值'  visible={this.state.visible}  onCancel={()=>{this.setState({visible:false})}}>
            <div style={{margin:'0 auto',width:'200px'}}>
              <Input onChange={(e)=>{this.setState({recharge:e.target.value});console.log(e.target.value)}} className={`${style.ncc_reset_input}`} type='number' placeholder='充值金额'/>
            </div>
        </Modal>
        <Modal 
          onOk={this.onWithdrawOk.bind(this)} title='提现'  visible={this.state.visible1}  onCancel={()=>{this.setState({visible1:false})}}>
            <div style={{margin:'0 auto',width:'200px'}}>
              <Input onChange={(e)=>{this.setState({withdraw:e.target.value});console.log(e.target.value)}} className={`${style.ncc_reset_input}`} type='number' placeholder='提现金额'/>
            </div>
        </Modal>
      </Layout> 
    )
  }
}
  // <div style={{width:'300px',marginBottom:30}}  className={`${style.date_reset_input}`}>
            //   <DatePicker
            //     placeholder='交易记录时间'
            //     onChange={(e,b)=>{this.setState({_date:b})}}
            //     style={{width:'100%'}}
            //     format="YYYY-MM-DD"
            //     disabledDate={disabledDate}
            //     showTime
            //   />
            // </div>
            // <Table columns={columns}
            // className={`${TableStyle.ncc_table}`}
            // key='ttt'
            //   dataSource={data} onRowClick={this.handleRowClick}
            //   pagination={pagination}
            //   loading={loading}
            //   onChange={this.handleTableChange.bind(this)}
            // />
export default connect()(Wallet);